<template>
  <div class="chart-container">
    <!-- 累计收益趋势图 -->
    <trend-vue></trend-vue>
    <!-- 第二行 -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="16">
        <!-- 日金额分析图 -->
        <horizontal-bar-vue></horizontal-bar-vue>
      </el-col>
      <el-col :span="8">
        <!-- 日历图 -->
        <calendar-vue></calendar-vue>
      </el-col>
    </el-row>

    <!-- 第三行 -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="6">
        <div>
          <!-- 饼图 -->
          <pie-vue></pie-vue>
          <!-- 文档云图 -->
          <word-cloud-vue class="mt-20"></word-cloud-vue>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 地图可视化 -->
        <map-vue></map-vue>
      </el-col>
    </el-row>

    <!-- s2表格数据可视化 -->
    <table-sheet-vue class="mt-20"></table-sheet-vue>
  </div>
</template>

<script setup >
import trendVue from "./components/trend/index";
import horizontalBarVue from "./components/horizontal-bar/index";
import calendarVue from "./components/calendar/index";
import pieVue from "./components/pie/index";
import wordCloudVue from "./components/word-cloud/index";
import mapVue from "./components/map/index";
import tableSheetVue from "./components/table-sheet/index";

import {} from "vue";
</script>

<style lang='scss' scoped>
.mt-20{
  margin-top: 20px;
}
</style>